<template>
	<view class="page-container">
		<view class="p-3 pb-1 page-wrap">
			<view class="flex justify-between align-center p-2 mb-3 serach-bar">
				<u-icon color="#CECECE" size="25" name="search"></u-icon>
				<view class="mr-2"></view>
				<u-input placeholder="请输入商品编号或名称" v-model="kw" clearable border="none">
				</u-input>
				<u-button @click="handleSearch" class="search-btn" :hairline="false" text="查询" size="mini"
					color="#007aff">
				</u-button>
			</view>
			<view class="order-list">
				<u-list @scrolltolower="scrolltolower" height="1080rpx">
					<u-list-item v-for="(item,idx) in orderList" :key="idx">
						<view class="flex mb-3 p-2 item" @click="handlePordClick(item)">
							<image class="mr-2 img" :src="'http://img.help10000.com' + item.Image" mode="scaleToFill">
							</image>
							<view class="flex justify-between direction-column f-1 info">
								<view class="flex align-start">
									<view class="f-1 mr-1">
										<view class="title">{{item.ItemName}}</view>
										<view class="desc">{{item.ItemStyle}}</view>
									</view>
									
								</view>
								<view class="flex justify-between align-center">
									<u--text color="#e0584e" size="20rpx" bold mode="price" :text="item.Price">
									</u--text>
									<view class="qty">{{item.StockQty}} 库存</view>
								</view>
							</view>
						</view>
					</u-list-item>
				</u-list>
			</view>
		</view>
		<u-safe-bottom></u-safe-bottom>

	</view>
	</view>
</template>

<script>
	import {
		sheetProdList
	} from "@/apis/workOrder.js";
	import {
		parseTime,
		getTotalPageNum
	} from "@/util";
	export default {
		data() {
			return {
				kw: '',
				currPageNo: 1,
				totalPagesNo: 1,
				orderList: [],
			};
		},
		onLoad(option) {
			if (option.wId && option.rId) {
				this.wId = option.wId
				this.rId = option.rId
				console.log('option', option.id)
				this.fetchData()
			} else {
				this.$navigateBack(this.$router, 1)
			}
		},
		methods: {
			handlePordClick(item){
				uni.navigateTo({
					url:'/pages/sheet/sheetAdd?item='+ JSON.stringify(item)
				})
			},
			handleSearch() {
				this.initQuery()
				this.fetchData()
			},
			initQuery() {
				this.currPageNo = 1
				this.totalPagesNo = 1
				this.orderList = []
			},
			async fetchData() {
				const res = await sheetProdList({
					kw: this.kw,
					WareId: this.wId,
					RepairId: this.rId,
					PageNo: this.currPageNo,
				})
				if (res.MsgCode != 0) return

				this.orderList = [...this.orderList, ...res.data.ProdList]
				this.totalPagesNo = getTotalPageNum(res.data.Count, 10)
			},
			scrolltolower() {
				if (this.currPageNo < this.totalPagesNo) {
					this.currPageNo += 1
					this.fetchData()
				}
			},
		}
	}
</script>

<style lang="scss">
	.page-container {
		.page-wrap {
			.serach-bar {
				background-color: #fff;
				border-radius: $s-border-radius;
				color: #333;
				font-size: 28rpx;

				.line {
					height: 40rpx;
					width: 1px;
					border-right: 1px solid rgba(0, 0, 0, 0.1);
				}

				.search-btn {
					width: 100rpx;
					min-width: 100rpx;
					margin: 0;
					margin-left: 20rpx;
					height: 50rpx;
					border-width: 0 !important;
					border-radius: $s-border-radius;

				}
			}

			.order-list {
				.item {
					background-color: #fff;
					box-shadow: $s-bg-shadow;
					border-radius: $s-border-radius;
					font-size: 26rpx;

					.img {
						width: 140rpx;
						height: 140rpx;
					}

					.desc {
						font-size: 20rpx;
						color: #777;
					}

					.qty {
						font-size: 20rpx;
					}

				}
			}
		}
	}
</style>
